<template>
  <AuditShowPage
    labelWidth="250px"
    :formData.sync="formData"
    :formItems="formItems"
    :handleFail="handleAuditFail"
    :handleSuccess="handleAuditSuccess"
    @goback="handleGoBack"
  >
    <h3 slot="page-header">品类待审核-查看</h3>
    <SkusTable
      v-if="!TableInfo.isNullList()"
      slot="brandTable"
      :showTotal=false
      :maxTableHeight="250"
      :data-source="TableInfo.list"
      :columns="TableInfo.columns"
    />
    <ListPopover
      slot="specAttrs"
      contentHeight="32px"
      :dataList="specAttrs.list"
      :content="specAttrs.names"
    >
      <template #li-item="slotProps">
        <span>{{ slotProps.item }}</span>
      </template>
    </ListPopover>
    <ListPopover
      slot="notSpecAttrs"
      contentHeight="32px"
      :dataList="notSpecAttrs.list"
      :content="notSpecAttrs.names"
    >
      <template #li-item="slotProps">
        <span>{{ slotProps.item }}</span>
      </template>
    </ListPopover>
  </AuditShowPage>
</template>
<script>
import AuditShowPage from '@/components/AuditShowPage';
import ListPopover from '@/components/ShowContent/ListPopover';
import SkusTable from '@/components/skusTable';
import { isResponseSuccess } from '@/utils/bizUtils';
import { getQualificationTypeName, TableInfo } from '@/utils/getUtils';
import {
  BASE_FORM_ITEMS,
  ALL_FORM_ITEMS,
  BRAND_TABLE_COLUMNS
} from './constants';
import {
  getPlatCategoryByUuidService,
  auditNoPassService,
  auditPassService
} from '@/api/basics/categoryManage/categoryToAudit';
export default {
  components: {
    AuditShowPage,
    SkusTable,
    ListPopover
  },
  data () {
    return {
      formData: {},
      formItems: BASE_FORM_ITEMS,
      uuid: '',
      TableInfo: new TableInfo({ columns: BRAND_TABLE_COLUMNS }),
      specAttrs: {
        list: [],
        names: ''
      },
      notSpecAttrs: {
        list: [],
        names: ''
      }
    }
  },
  mounted () {
    this.uuid = this.$route.query?.uuid
    this.getPageDetails()
  },
  methods: {
    initFormItems (level) {
      this.formItems = level == '4' ? this.getAllFormItemsByEditStatus() : BASE_FORM_ITEMS
    },
    // 根据编辑类型获取更新form展示项
    getAllFormItemsByEditStatus () {
      if (this.$route?.query?.editStatus == '1') return ALL_FORM_ITEMS // 新增按默认
      const notShowItems = ['guideAddRate', 'sellWellAddRate', 'limitAddRate']
      const filterItems = ALL_FORM_ITEMS.filter(item => !notShowItems.includes(item.prop))
      return filterItems
    },
    // 获取页面详情
    async getPageDetails () {
      const data = { platCategoryUuid: this.uuid }
      const res = await getPlatCategoryByUuidService(data, '.page-body')
      if (res?.retData) {
        const { productQualificationNames, classifyQualificationNames, diffMap } = this.getRelQuaNamesInfo(res.retData)
        this.formData = {
          ...res.retData,
          diffMap,
          productQualificationNames,
          classifyQualificationNames,
        }
        this.initFormItems(res.retData.levelNum)
        this.TableInfo.setList(res.retData.categoryBrandAddRateDiffList ?? [])
        this.setSpecDetails(res?.retData)
      }
    },
    // 获取资质相关名称数据
    getRelQuaNamesInfo (retData) {
      const { listQualificationTypes, diffMap = {} } = retData
      const productQualificationNames = this.getQualificationNames(listQualificationTypes, '1')
      const classifyQualificationNames = this.getQualificationNames(listQualificationTypes, '2')
      if (diffMap?.productQualificationList) {
        diffMap.productQualificationNames = {
          oldValue: this.getQualificationNames(diffMap?.productQualificationList?.oldValue),
          newValue: this.getQualificationNames(diffMap?.productQualificationList?.newValue)
        }
      }
      if (diffMap?.classifyQualificationList) {
        diffMap.classifyQualificationNames = {
          oldValue: this.getQualificationNames(diffMap?.classifyQualificationList?.oldValue),
          newValue: this.getQualificationNames(diffMap?.classifyQualificationList?.newValue)
        }
      }
      return { productQualificationNames, classifyQualificationNames, diffMap }
    },
    // 获取资质类型名称
    getQualificationNames (list = [], relType) {
      if (!list) return
      const names = list
        .filter(item => relType ? (item.selected && item.relType == relType) : item.selected)
        .map(item => getQualificationTypeName(item))
        .join('；')
      return names
    },
    // 返回
    handleGoBack () {
      this.$router.push({ name: 'categoryAuditList' })
    },
    // 审核不通过
    async handleAuditFail (loadingFn, messageFn, dataSource) {
      const data = { uuids: this.uuid, auditNote: dataSource?.reason }
      const res = await auditNoPassService(data, loadingFn)
      if (isResponseSuccess(res)) {
        messageFn()
        this.handleGoBack()
      }
    },
    // 审核通过
    async handleAuditSuccess (loadingFn, messageFn, dataSource) {
      const data = { uuids: this.uuid, auditNote: dataSource?.reason }
      const res = await auditPassService(data, loadingFn)
      if (isResponseSuccess(res)) {
        messageFn()
        this.handleGoBack()
      }
    },
    // 设置规格详情
    setSpecDetails (retData) {
      this.notSpecAttrs = {
        names: (retData?.notSpecAttrList ?? []).join('，'),
        list: retData?.notSpecAttrList ?? []
      }
      this.specAttrs = {
        names: (retData?.specAttrList ?? []).join('，'),
        list: retData?.specAttrList ?? []
      }
    }
  }
}
</script>
<style ></style>
